<template>
  <a-modal :maskClosable="false" :title="title" centered :width="600" v-model="visible" @ok="handleSubmit">
    <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="{ span: 5 }" :wrapper-col="{ span: 16 }">
      <a-form-model-item label="关联会员" prop="cocId">
        <a-select
          show-search
          placeholder="请输入关键词搜索会员"
          style="width: 100%"
          :show-arrow="true"
          :default-active-first-option="false"
          :filter-option="false"
          :not-found-content="searchKeyword ? '暂无该会员' : null"
          v-model="form.cocId"
          @search="handleSearch"
        >
          <a-select-option v-for="(item, index) in memberList" :key="item.id">
            {{ item.memberName }}
          </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item label="管理权限" prop="memberRoleType">
        <a-radio-group v-model="form.memberRoleType">
          <!-- <a-radio :value="1"> 负责人 </a-radio> -->
          <a-radio :value="2"> 管理员</a-radio>
          <a-radio :value="3"> 普通成员 </a-radio>
        </a-radio-group>
        <div v-if="form.memberRoleType" class="linh-20 fz-12">{{ roleTipMap[form.memberRoleType] }}</div>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import { headquartersPageList, leadingMemberAdd } from '@/api/system/system'
import { debounce } from '@/utils/common'

export default {
  props: {
    registerId: {
      type: Number,
      default: undefined
    }
  },
  data() {
    return {
      visible: false,
      title: '关联已有会员',
      searchKeyword: '',
      memberList: [], // 搜索的用户列表
      form: {
        cocId: '', // 关联会员ID
        name: '', // 用户名称
        phone: '', // 手机号
        memberRoleType: null, // 管理权限
        avatar: '', // 头像
        socialPosition: '', // 单位职务,
        registerId: undefined
      },
      rules: {
        cocId: [{ required: true, message: '请搜索并选择关联会员', trigger: 'blur' }],
        memberRoleType: [{ required: true, message: '请选择管理权限', trigger: 'change' }]
      },
      roleTipMap: {
        1: '温馨提示：负责人限设1人，操作权限（单位主页、单位成员、入会资料、代报名）',
        2: '温馨提示：管理员限设5人，操作权限（单位主页、单位成员、入会资料、代报名）',
        3: '温馨提示：普通成员限设20人，查看权限（单位主页、单位成员、入会资料）'
      }
    }
  },
  methods: {
    show(row) {
      Object.assign(this.$data.form, this.$options.data().form) // 重置数据

      this.visible = true

      this.form.registerId = this.registerId

      this.form.name = row.name
      this.form.phone = row.phone
      this.form.avatar = row.avatar
      this.form.socialPosition = row.companyPositionName
      this.$nextTick(() => {
        this.$refs.ruleForm.clearValidate()
      })
    },
    handleSearch(e) {
      this.searchKeyword = e
      if (e) {
        debounce(
          () => {
            headquartersPageList({ keyword: e, size: 200, current: 1 }).then(res => {
              this.memberList = res.data.records
            })
          },
          500,
          false
        )
      } else {
        this.memberList = []
      }
    },
    // 给会员增加成员
    handleSubmit() {
      console.log(JSON.parse(JSON.stringify(this.form)))
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          leadingMemberAdd(this.form).then(res => {
            this.visible = false
            this.$emit('success')
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped></style>
